<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>弹性布局</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Amatic+SC"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <div class="box-item panel1" data-index="0">
      <p class="top">top1</p>
      <p class="middle">1</p>
      <p class="bottom">bot1</p>
    </div>
    <div class="box-item panel2" data-index="1">
      <p class="top">top2</p>
      <p class="middle">2</p>
      <p class="bottom">bot2</p>
    </div>
    <div class="box-item panel3" data-index="2">
      <p class="top">top3</p>
      <p class="middle">3</p>
      <p class="bottom">bot3</p>
    </div>
    <div class="box-item panel4" data-index="3">
      <p class="top">top4</p>
      <p class="middle">4</p>
      <p class="bottom">bot4</p>
    </div>
    <div class="box-item panel5" data-index="4">
      <p class="top">top5</p>
      <p class="middle">5</p>
      <p class="bottom">bot5</p>
    </div>
  </body>
  <script>
    const boxList = document.querySelectorAll(".box-item");
    window.addEventListener("click", (event) => {
      console.log(event);
      let index = null;
      if (event.target.className.includes("box-item")) {
        index = event.target.getAttribute("data-index");
      } else {
        index = event.target.parentNode.getAttribute("data-index");
      }
      changeStyle(boxList[index]);
    });
    function changeStyle(dom) {
      /*  dom.classList.add("active"); */
      dom.classList.toggle("active");
    }
  </script>
</html>
